<template>
  <div class="custom-bg">
    <custom-table
      row-key="labelCode"
      :loading="state.loading"
      :data="state.dataSource"
      :columns="tableColumns"
      v-model:current-page="state.currentPage"
      v-model:page-size="state.pageSize"
      :total="state.total"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      border
    >
      <template #header>
        <!-- 搜索表单 -->
        <el-form
          :model="searchForm"
          :lock-scroll="false"
          label-position="top"
          class="mb-[40px] overflow-hidden"
          @submit.prevent="handleSearch"
        >
          <el-row :gutter="60">
            <el-col :span="5">
              <el-form-item label="标签名称">
                <el-input v-model.trim="searchForm.labelName" maxlength="50" placeholder="请输入内容" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item label="打标方式">
                <el-select
                  v-model="searchForm.labelWay"
                  class="min-w-[120px] custom-select"
                  clearable
                  placeholder="请选择打标方式"
                  @clear="handleSearch"
                >
                  <el-option label="自动匹配" :value="1" />
                  <el-option label="手动打标" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item label="是否启用">
                <el-select
                  v-model="searchForm.disableFlag"
                  class="min-w-[120px] custom-select"
                  clearable
                  placeholder="请选择状态"
                  @clear="handleSearch"
                >
                  <el-option label="是" :value="true" />
                  <el-option label="否" :value="false" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6" style="display: flex">
              <div class="flex items-center pt-[10px] ml-[74px]">
                <el-button type="primary" :loading="state.loading" @click="handleSearch"> 查询 </el-button>
                <el-button @click="handleReset"> 重置 </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #btn>
        <el-button type="primary">新建规则</el-button>
      </template>

      <template #labelName="{ row }">
        <div class="flex flex-row items-center">
          <span class="whiteSpace">
            {{ row.labelName }}
          </span>
        </div>
      </template>

      <template #departmentName="{ row }">
        <div class="flex flex-row items-center">
          <span class="whiteSpace">
            {{ row.labelWay === 1 ? row.departmentName : row.applyRange }}
          </span>
        </div>
      </template>

      <template #labelWay="{ row }">
        {{ row.labelWay === 1 ? "自动匹配" : "手动打标" }}
      </template>

      <template #disableFlag="{ row }">
        <el-switch v-model="row.disableFlag" size="large" active-text="是" inactive-text="否" />
      </template>

      <template #srcList="{ row }">
        <ImagePreview :src="row.srcList" :width="50" :height="50" />
      </template>

      <template #action="{ row }">
        <el-button link :type="!row.disableFlag ? 'primary' : 'info'" :disabled="row.disableFlag">编辑</el-button>
        <el-button
          link
          :type="!row.disableFlag ? 'primary' : 'info'"
          :disabled="row.disableFlag"
          :class="{ 'disable-text': row.disableFlag }"
          >启用</el-button
        >
        <el-button link :type="row.disableFlag ? 'primary' : 'info'" :disabled="!row.disableFlag">停用</el-button>
        <el-button
          link
          :type="!row.disableFlag ? 'primary' : 'info'"
          :disabled="row.disableFlag"
          :class="{ 'disable-text': row.disableFlag }"
          >删除</el-button
        >
      </template>
    </custom-table>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";

interface EmployeeList {
  total: number;
  current: number;
  pages: number;
  size: number;
  optimizeCountSql: boolean;
  records: any[];
  searchCount: boolean;
  orders: any[];
}

interface DataSourceItem {
  updateTime: string;
  labelWay: number;
  delFlag: boolean;
  employeeList: EmployeeList;
  createTime: string;
  disableFlag: boolean;
  createUser: string;
  id: number;
  applyRange: string;
  labelName: string;
  labelCode: string;
  departmentName?: string;
  labelRuleName?: string;
}

// 搜索表单数据
const searchForm = reactive({
  labelName: "",
  labelWay: "",
  disableFlag: ""
});

const queryParams = reactive({
  pageSize: 10,
  pageNum: 1
});

// 页面状态数据
const state = reactive({
  loading: false,
  currentPage: 1,
  pageSize: 10,
  total: 0,
  dataSource: [] as DataSourceItem[]
});

const tableColumns = [
  { type: "index", label: "序号", width: 70 },
  {
    slot: "labelName",
    label: "标签名称",
    width: 180,
    showOverflowTooltip: true
  },
  {
    slot: "labelWay",
    label: "打标方式",
    width: 120,
    showOverflowTooltip: true
  },
  {
    slot: "departmentName",
    label: "适用范围",
    minWidth: 80,
    showOverflowTooltip: true
  },
  {
    prop: "labelRuleName",
    label: "标签规则",
    minWidth: 150,
    showOverflowTooltip: true
  },
  {
    slot: "srcList",
    label: "头像",
    minWidth: 150,
    showOverflowTooltip: true
  },
  { slot: "disableFlag", label: "是否启用", width: 180 },
  { slot: "action", label: "操作", width: 220, fixed: "right" }
];

// 查询
function handleSearch() {
  queryParams.pageNum = 1;
  getList();
}
// 获取列表
async function getList() {
  try {
    state.loading = true;
    setTimeout(() => {
      state.dataSource = [
        {
          updateTime: "2024-11-26 14:26:35",
          labelWay: 0,
          delFlag: false,
          employeeList: {
            total: 0,
            current: 1,
            pages: 0,
            size: 10,
            optimizeCountSql: true,
            records: [],
            searchCount: true,
            orders: []
          },
          createTime: "2024-11-26 14:26:35",
          disableFlag: false,
          createUser: "杨梦宇",
          id: 114,
          applyRange: "全公司",
          labelName: "高潜人才",
          labelCode: "adbba926fc2a33a7e4b39b27bc4d1ce9",
          srcList:
            "https://element-plus.org/images/element-plus-logo.svg,https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png"
        },
        {
          updateTime: "2024-11-26 10:34:51",
          labelWay: 0,
          delFlag: false,
          employeeList: {
            total: 0,
            current: 1,
            pages: 0,
            size: 10,
            optimizeCountSql: true,
            records: [],
            searchCount: true,
            orders: []
          },
          createTime: "2024-11-26 10:34:51",
          disableFlag: false,
          createUser: "杨梦宇",
          id: 113,
          applyRange: "全公司",
          labelName: "历史海外经验",
          labelCode: "6463f80a3aa2e39a266a2c18674061c1",
          srcList: "https://element-plus.org/images/element-plus-logo.svg"
        },
        {
          departmentName: "信息资源部,行政部",
          updateTime: "2024-11-26 10:02:09",
          labelWay: 1,
          delFlag: false,
          labelRuleName: "员工状态 != '离职'",
          employeeList: {
            total: 0,
            current: 1,
            pages: 0,
            size: 10,
            optimizeCountSql: true,
            records: [],
            searchCount: true,
            orders: []
          },
          createTime: "2024-11-26 10:02:07",
          labelRule:
            '{"children":[{"conditionKey":"staff_status","conditionKeyName":"员工状态","conditionType":"unequals","conditionTypeName":"不等于","conditionValue":"2","conditionValueChineseName":"离职","currentGroup":"eb67b6b9-303f-4d6b-9e04-fe3bab16294b","parrentGroup":"6d4bfc04-346c-4002-8353-fb9d5296b2d8","tableName":"employee_list qs el","type":"condition"}],"conditionRelation":"or","currentGroup":"6d4bfc04-346c-4002-8353-fb9d5296b2d8"}',
          disableFlag: false,
          createUser: "null",
          id: 112,
          applyRange: "000023,000024",
          labelName: "80后",
          labelCode: "ce0ba26a14a353250384b3899c992665",
          srcList: "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png"
        },
        {
          departmentName: "信息资源部",
          updateTime: "2024-11-26 09:50:27",
          labelWay: 1,
          delFlag: false,
          labelRuleName: "出生日期 != '2024-11-26' AND 员工状态 = '在职' AND 最高学历 = '本科'",
          employeeList: {
            total: 0,
            current: 1,
            pages: 0,
            size: 10,
            optimizeCountSql: true,
            records: [],
            searchCount: true,
            orders: []
          },
          createTime: "2024-11-26 09:50:27",
          labelRule:
            '{"children":[{"conditionKey":"birthday","conditionKeyName":"出生日期","conditionType":"unequals","conditionTypeName":"不等于","conditionValue":"2024-11-26","conditionValueChineseName":"2024-11-26","currentGroup":"4399db2a-2057-4737-9be2-ce736c0723c8","parrentGroup":"9e0dfb32-410e-4430-8c55-e5732dd1730b","tableName":"employee_list el","type":"condition"},{"conditionKey":"staff_status","conditionKeyName":"员工状态","conditionType":"equals","conditionTypeName":"等于","conditionValue":"1","conditionValueChineseName":"在职","currentGroup":"63b1810c-1f1a-4d58-971c-49b82fe51e40","parrentGroup":"9e0dfb32-410e-4430-8c55-e5732dd1730b","tableName":"employee_list el","type":"condition"},{"conditionKey":"educational_background","conditionKeyName":"最高学历","conditionType":"equals","conditionTypeName":"等于","conditionValue":"3","conditionValueChineseName":"本科","currentGroup":"10f36c0f-c6c3-44ac-8810-1287a930f878","parrentGroup":"9e0dfb32-410e-4430-8c55-e5732dd1730b","tableName":"left join staff_education se on se.staff_no = el.staff_no and se.is_highest = \'1\'","type":"condition"}],"conditionRelation":"and","currentGroup":"9e0dfb32-410e-4430-8c55-e5732dd1730b"}',
          disableFlag: false,
          createUser: "陈宇10",
          id: 111,
          applyRange: "000023",
          labelName: "00后",
          labelCode: "d8cde9e313b9cc860fa5ec7288a9b5ee",
          srcList: ""
        },
        {
          departmentName: "商务部本部",
          updateTime: "2024-11-26 09:34:14",
          labelWay: 1,
          delFlag: false,
          labelRuleName: "员工状态 = '在职'",
          employeeList: {
            total: 0,
            current: 1,
            pages: 0,
            size: 10,
            optimizeCountSql: true,
            records: [],
            searchCount: true,
            orders: []
          },
          createTime: "2024-11-26 09:34:15",
          labelRule:
            '{"children":[{"conditionKey":"staff_status","conditionKeyName":"员工状态","conditionType":"equals","conditionTypeName":"等于","conditionValue":"1","conditionValueChineseName":"在职","currentGroup":"f7783cda-c526-4dc3-a636-acf64a84b5b6","parrentGroup":"f372e33a-0d6f-4356-bd99-138c46c75f30","tableName":"employee_list el","type":"condition"}],"conditionRelation":"or","currentGroup":"f372e33a-0d6f-4356-bd99-138c46c75f30"}',
          disableFlag: false,
          createUser: "杨鹏泽",
          id: 110,
          applyRange: "000034017",
          labelName: "90后",
          labelCode: "f5d98a5d6b863cc4994e0b0c9991ec0c",
          srcList: ""
        },
        {
          updateTime: "2024-11-25 18:01:14",
          labelWay: 0,
          delFlag: false,
          employeeList: {
            total: 0,
            current: 1,
            pages: 0,
            size: 10,
            optimizeCountSql: true,
            records: [],
            searchCount: true,
            orders: []
          },
          createTime: "2024-11-25 18:01:15",
          disableFlag: false,
          createUser: "陈宇10",
          id: 108,
          applyRange: "全公司",
          labelName: "80后",
          labelCode: "ce0ba26a14a353250384b3899c992665",
          srcList: ""
        },
        {
          updateTime: "2024-11-25 18:01:07",
          labelWay: 0,
          delFlag: false,
          employeeList: {
            total: 0,
            current: 1,
            pages: 0,
            size: 10,
            optimizeCountSql: true,
            records: [],
            searchCount: true,
            orders: []
          },
          createTime: "2024-11-25 18:01:07",
          disableFlag: true,
          createUser: "陈宇10",
          id: 107,
          applyRange: "全公司",
          labelName: "60后",
          labelCode: "046608e8d5558b2b0633d963a385666a",
          srcList: ""
        },
        {
          departmentName: "信息资源部",
          updateUser: "陈宇10",
          updateTime: "2024-11-25 17:59:30",
          labelWay: 1,
          delFlag: false,
          labelRuleName: "最高学历 = '硕士' AND 员工状态 = '在职'",
          labelRuleCondition:
            " WHERE ( el.staff_dept_code LIKE '%000023%'   )  AND ( educational_background = '2' AND staff_status = '1' ) ",
          employeeList: {
            total: 0,
            current: 1,
            pages: 0,
            size: 10,
            optimizeCountSql: true,
            records: [],
            searchCount: true,
            orders: []
          },
          createTime: "2024-11-25 17:01:37",
          labelRule:
            '{"children":[{"conditionKey":"educational_background","conditionKeyName":"最高学历","conditionType":"equals","conditionTypeName":"等于","conditionValue":"2","conditionValueChineseName":"硕士","currentGroup":"3a6d107e-0867-400e-8238-1079b4ee7415","parrentGroup":"73c4f5ea-763e-4402-886d-2263c52ee86e","tableName":"left join staff_education se on se.staff_no = el.staff_no and se.is_highest = \'1\'","type":"condition"},{"conditionKey":"staff_status","conditionKeyName":"员工状态","conditionType":"equals","conditionTypeName":"等于","conditionValue":"1","conditionValueChineseName":"在职","currentGroup":"f1156ee7-3e3e-47aa-9693-1791e82757f2","parrentGroup":"73c4f5ea-763e-4402-886d-2263c52ee86e","tableName":"employee_list el","type":"condition"}],"conditionRelation":"and","currentGroup":"73c4f5ea-763e-4402-886d-2263c52ee86e"}',
          disableFlag: false,
          createUser: "null",
          id: 106,
          applyRange: "000023",
          labelName: "50后",
          labelCode: "d060814222cc81dd37a7e8b3923e60d7",
          srcList: ""
        },
        {
          departmentName: "信息资源部",
          updateUser: "陈宇10",
          updateTime: "2024-11-25 16:43:46",
          labelWay: 1,
          delFlag: false,
          labelRuleName: "出生日期 != '2024-11-06' AND 员工状态 != '试用' AND 最高学历 != '硕士'",
          labelRuleCondition:
            " WHERE ( el.staff_dept_code LIKE '%000023%'   )  AND ( birthday != '2024-11-06' AND staff_status != '0' AND educational_background != '2' ) ",
          employeeList: {
            total: 0,
            current: 1,
            pages: 0,
            size: 10,
            optimizeCountSql: true,
            records: [],
            searchCount: true,
            orders: []
          },
          createTime: "2024-11-25 16:42:49",
          labelRule:
            '{"children":[{"conditionKey":"birthday","conditionKeyName":"出生日期","conditionType":"unequals","conditionTypeName":"不等于","conditionValue":"2024-11-06","conditionValueChineseName":"2024-11-06","currentGroup":"f46f6ad9-3c21-4e94-961c-64799742ef13","parrentGroup":"d63ebffd-ea17-4843-b132-1dce9f736616","tableName":"employee_list el","type":"condition"},{"conditionKey":"staff_status","conditionKeyName":"员工状态","conditionType":"unequals","conditionTypeName":"不等于","conditionValue":"0","conditionValueChineseName":"试用","currentGroup":"ff80246e-2baa-4f9d-99f9-33d4093e73c5","parrentGroup":"d63ebffd-ea17-4843-b132-1dce9f736616","tableName":"employee_list el","type":"condition"},{"conditionKey":"educational_background","conditionKeyName":"最高学历","conditionType":"unequals","conditionTypeName":"不等于","conditionValue":"2","conditionValueChineseName":"硕士","currentGroup":"0eb61bb6-9529-4967-a577-3ff9881fc685","parrentGroup":"d63ebffd-ea17-4843-b132-1dce9f736616","tableName":"left join staff_education se on se.staff_no = el.staff_no and se.is_highest = \'1\'","type":"condition"}],"conditionRelation":"and","currentGroup":"d63ebffd-ea17-4843-b132-1dce9f736616"}',
          disableFlag: false,
          createUser: "何云峰",
          id: 104,
          applyRange: "000023",
          labelName: "一年内新员工",
          labelCode: "872701286b38e8907d1d5d720469e406",
          srcList: ""
        },
        {
          departmentName: "信息资源部",
          updateUser: "null",
          updateTime: "2024-11-25 16:27:35",
          labelWay: 1,
          delFlag: false,
          labelRuleName: "出生日期 < '1993-11-15'",
          labelRuleCondition: " WHERE ( el.staff_dept_code LIKE '%000023%'   )  AND ( birthday < '1993-11-15' ) ",
          employeeList: {
            total: 0,
            current: 1,
            pages: 0,
            size: 10,
            optimizeCountSql: true,
            records: [],
            searchCount: true,
            orders: []
          },
          createTime: "2024-11-25 15:23:49",
          labelRule:
            '{"children":[{"conditionKey":"birthday","conditionKeyName":"出生日期","conditionType":"lessThan","conditionTypeName":"小于","conditionValue":"1993-11-15","conditionValueChineseName":"1993-11-15","currentGroup":"9e6f284a-7140-4be3-a486-6e70992ef78b","parrentGroup":"384372ca-d6b4-4cad-b8e2-e9d6088ddc92","tableName":"employee_list el","type":"condition"}],"conditionRelation":"or","currentGroup":"384372ca-d6b4-4cad-b8e2-e9d6088ddc92"}',
          disableFlag: false,
          createUser: "陈宇10",
          id: 101,
          applyRange: "000023",
          labelName: "QS100",
          labelCode: "8f98b790afe12207c031ba6c1b8fba22",
          srcList: ""
        },
        {
          departmentName: "信息资源部",
          updateUser: "null",
          updateTime: "2024-11-25 16:27:35",
          labelWay: 1,
          delFlag: false,
          labelRuleName: "出生日期 < '1993-11-15'",
          labelRuleCondition: " WHERE ( el.staff_dept_code LIKE '%000023%'   )  AND ( birthday < '1993-11-15' ) ",
          employeeList: {
            total: 0,
            current: 1,
            pages: 0,
            size: 10,
            optimizeCountSql: true,
            records: [],
            searchCount: true,
            orders: []
          },
          createTime: "2024-11-25 15:23:49",
          labelRule:
            '{"children":[{"conditionKey":"birthday","conditionKeyName":"出生日期","conditionType":"lessThan","conditionTypeName":"小于","conditionValue":"1993-11-15","conditionValueChineseName":"1993-11-15","currentGroup":"9e6f284a-7140-4be3-a486-6e70992ef78b","parrentGroup":"384372ca-d6b4-4cad-b8e2-e9d6088ddc92","tableName":"employee_list el","type":"condition"}],"conditionRelation":"or","currentGroup":"384372ca-d6b4-4cad-b8e2-e9d6088ddc92"}',
          disableFlag: false,
          createUser: "陈宇10",
          id: 101,
          applyRange: "000023",
          labelName: "QS100",
          labelCode: "8f98b790afe12207c031ba6c1b8fba22",
          srcList: "https://element-plus.org/images/element-plus-logo.svg"
        }
      ];
    }, 2000);
    state.loading = false;
  } catch (error) {
    state.loading = false;
  }
}

// 初始化列表
onMounted(() => {
  getList();
});

// 重置
function handleReset() {
  Object.assign(searchForm, {
    labelName: "",
    labelWay: "",
    disableFlag: ""
  });
  queryParams.pageNum = 1;
  state.total = 0;
  state.dataSource = [];
  getList();
}
// 处理分页大小变化
function handleSizeChange(pageSize: number) {
  queryParams.pageSize = pageSize;
  getList();
}

// 处理当前页变化
function handleCurrentChange(pageNum: number) {
  queryParams.pageNum = pageNum;
  getList();
}
</script>

<style lang="scss" scoped>
.custom-bg {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1) !important;
  padding: 18px 30px 60px 30px !important;
  border-radius: 6px;
  .whiteSpace {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
